<template>
    <div class="echarts"></div>
    </template>
    <script>
    import echarts from 'echarts'
    export default {
    name: 'ECharts',
    data () {
    return {
    chart: null
    }
    },
    mounted () { // 页面渲染完成后，进行图表初始化
    this.initChart()
    },
    methods: {
    initChart () {
    let dom = this.$el.querySelector('.echarts')
    this.chart = echarts.init(dom)
    let option = { // 图表的配置项
    title: {
    text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {},
    series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20, 16]
    }]
    }
    this.chart.setOption(option) // 将配置项传入图表对象
    }
    }
    }
    </script>
    <style scoped>
    .echarts {
    width: 100%;
    height: 400px;
    }
    </style>